<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <br /><b>东周互联</b>
        <br />
        <br />
        <label><input name="Type" type="radio" value="1" v-model="type" />河洛杠次</label>
        <label><input name="Type" type="radio" value="2" v-model="type" />斗地主</label>

        <br />最后结束时间：
        <input type="text" v-model="start" />
        <br />游戏开始时间：
        <input type="text" v-model="end" />
        <p>{{ detail }}</p>
        <button @click="getSortList()" class="btn btn-primary">计算数据</button>
        <!-- <detail msg="🍎河洛杠次结果🍌" :dataList="dataList" v-if="isShow" /> -->
        <template v-if="isShow">
            <h2>{{ msg }}</h2>
            <table class="table table-bordered">
                <!-- <caption>Optional table caption.</caption> -->
                <thead>
                    <tr>
                        <th>#</th>
                        <th>头像</th>
                        <th>userId</th>
                        <th>名称</th>
                        <th>最终得分</th>
                        <th>明细(扣除房费之后的数据)</th>
                        <th>赛事源数据</th>
                        <th>操作</th>
                    </tr> 
                </thead>
                <tbody>
                    <tr v-for="(item,index) in dataList" :key="index">
                        <th scope="row">{{index+1}}</th>
                        <td><img :src="item.headimg" alt="木有图片哦" class="img"></td>
                        <td>{{item.gameuserid}}</td>
                        <td>{{item.formatUserName}}</td>
                        <td>{{item.finalScore}}</td>
                        <td>{{item.score}}</td>
                        <td>{{item.origin}}</td>
                        <td>
                            <!-- <i class="glyphicon-class glyphicon glyphicon-align-left" @click="getScore(item.score);"></i>
                            &nbsp;&nbsp;&nbsp;
                            <i class="glyphicon-class glyphicon glyphicon-option-horizontal" @click="getScore(item.origin);"></i> -->
                            <!-- &nbsp;&nbsp;&nbsp; -->
                            <i class="glyphicon-class glyphicon glyphicon-pencil" data-toggle="modal" data-target="#exampleModal" @click="editName(item, index)"></i>
                        </td>
                    </tr>
                </tbody>
            </table>
        </template>

        <!-- edit username Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <form>
                  <div class="form-group row">
                    <label for="inputPassword" class="col-sm-2 col-form-label">名称</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="inputPassword" placeholder="username" v-model="username">
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="toSubmitName">确定</button>
              </div>
            </div>
          </div>
        </div>

        <!-- toast -->
        <div class="toast" v-show="toastShow">{{toastText}}</div>
    </div>
</template>

<script>

export default {
    name: "App",
    data() {
        return {
            msg:"🍎东周互联结果🍌",
            type: '1',      // 1 河洛杠次  2 斗地主
            dataList:[],

            start: "",
            end: "",
            detail: "时间格式示例： \n开始时间：2020-08-02 01:21:50   \n 结束时间：2020-08-01 10:44:29",
            isShow: false,

            username: '',
            editIndex : null,
            editItem: null,

            toastShow: false,
            toastText: "",

            isClick: false
        };
    },
     watch:{
        type(val){
            this.isShow = false;
            this.isClick = false;
            this.toastShow = false;
        }
    },
    methods: {
        async getSortList() {
            if(this.isClick){
                this.toast('已经在请求啦，请稍等');
                return;
            }
            // 关闭内容显示
            this.isShow = false;
            this.dataList = [];
            // 2020-02-24 02:08:51
            let temp1 = [...this.start.split(" ")[0].split("-"), ...this.start.split(" ")[1].split(":")];
            let t1 = `${temp1[0]}-${temp1[1]}-${temp1[2]} ${temp1[3]}:${temp1[4]}:${temp1[5]}`

            let temp2 = [...this.end.split(" ")[0].split("-"), ...this.end.split(" ")[1].split(":")];
            let t2 = `${temp2[0]}-${temp2[1]}-${temp2[2]} ${temp2[3]}:${temp2[4]}:${temp2[5]}`

            let start = new Date(t1.replace(/-/g,'/')).getTime();
            let end = new Date(t2.replace(/-/g,'/')).getTime();
            this.detail = t1 + '\t' + t2 + '\n' + start + '\t' + end;

            if (start && end) {
                console.log(start, end);
                let url = '';
                if(this.type === '1') url = "api/getSortGameList";
                if(this.type === '2') url = "api/getDdzSortGameList";
                this.toast('请求中，请稍等',100000);
                this.isClick = true;
                let res = await this.$axios
                    .post(url, { start, end })
                    .catch(err => { this.toast('访问服务器出错'); this.isClick = false; });
                console.log(res);
                const { code, data = null, msg } = res.data;
                if(code == -1){
                    this.toast('查询出错',1000);
                    this.isClick = false;
                    return;
                }
                if (data.length != 0) {
                    this.dataList = data
                    this.toastShow = false
                    this.isShow = true;
                    this.isClick = false;
                }
            } else {
                this.isShow = false;
                console.log("输入时间格式不正确");
                this.toast('输入时间格式不正确');
                this.isClick = false;
            }
        },
        // 查看分数详情
        getScore(str){
            this.toast(str,10000)
        },

        editName(item, index) {
          this.editIndex = index
          this.editItem = item
          this.username = item.formatUserName
        },

        // 修改名称
        async toSubmitName(){
          const { username } = this;
          const { gameuserid } = this.editItem;
          let res = await this.$axios
              .post("api/editUserName", { gameuserid, username })
              .catch(err => { this.toast('访问服务器出错'); });
          console.log(res);

          if(res.data.code === 1) {
            this.dataList[this.editIndex].formatUserName = username;
            this.toast('名称修改成功！', 1000);
          }else{
            this.toast('访问服务器出错');
          }
        },

        // toast
        toast(str,time=1500) {
            let v = this;
            v.toastText = str;
            v.toastShow = true;
            setTimeout(function() {
                v.toastShow = false;
            }, time);
        }
    }
};
</script>

<style>
#app {
    text-align: center;
    margin-top: 60px;
}
.img{
    width: 30px;
    height: 30px;
}
.toast {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 60%;
    transition: all 0.5s;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: 5px;
    color: #fff;
    background: rgba(17, 17, 17, 0.7);
    height: auto;
    line-height: 45px;
    padding: 0 15px;
}
</style>
